import { View, Input } from "@tarojs/components"
import { useEffect, useReducer } from "react"
import { AtButton } from 'taro-ui'
import Taro from '@tarojs/taro'

import XFormItem from '../../../../components/XFormItem'
import XImage from "../../../..//components/XImage"
import { hideLoading, reducer, showLoading, showModal, showToast } from '../../../../utils'

import './index.scss'
import { editDeviceApi } from "../../../../services/Device"

export default (props : {
    device:Device|null,
    onFinish : {
        (data:Device):void
    }
}) => {
    let initFormData:Device = {
        deviceId : 0,
        deviceName : '',
        address : '',
        longitude : '',
        latitude : '',
    }

    let [formData, formDataDispatch] = useReducer(reducer, initFormData)

    function changeInput(data:any) {
        formDataDispatch(data)
    }


    function chooseLocation() {
        Taro.chooseLocation({
            success (res) {
                console.log(res)
                formDataDispatch({longitude : res.longitude, latitude : res.latitude, address : res.address})
            }
        })
    }

    function getLocation(){
        showLoading()
        Taro.getLocation({
            success(res) {
                formDataDispatch({longitude : res.longitude, latitude : res.latitude})
            },
            complete(res) {
                hideLoading()
            },
            fail(res) {
                showModal('获取当前位置失败')
            }
        })
    }


    async function submit() {
        let data = JSON.parse(JSON.stringify(formData))
        showLoading()
        const res = await editDeviceApi(data)
        if(res) {
            props.onFinish(data)
            showToast('保存成功')
        }else {
            showModal('保存失败')
        }
        hideLoading()
    }

    useEffect(() => {
        if(props.device) {
            let device = props.device
            for(let k in formData) {
                if(device[k] != null) {
                    formData[k] = device[k]
                }
            }

            formDataDispatch({...formData})
        }
    }, [props.device])
    
    return <>
        <View className='page-view'>
            <View>
                <View className='module' style='padding-bottom:0;'>
                    <XFormItem label='设备名称' labelWidth={150}>
                        <View className='form-item'>
                            <Input type='text' placeholder='请填写设备名称' value={formData.deviceName} onInput={e => { changeInput({deviceName: e.detail.value})}} />
                        </View>
                    </XFormItem>
                    <XFormItem label='地址' labelWidth={150}>
                        <View className='form-item flex-align-items-center'>
                            <Input type='digit' className='flex-1' placeholder='设备地址' value={formData.address} onInput={e => { changeInput({address: e.detail.value})}} />
                            <View className='m-l-30' onClick={chooseLocation}>
                                <XImage src='small-location.png' className='location-icon'></XImage>
                            </View>
                        </View>
                    </XFormItem>
                    <XFormItem label='经纬度' labelWidth={150}>
                        <View className='form-item flex-align-items-center'>
                            <Input type='digit' className='flex-1' placeholder='经度' value={formData.longitude} onInput={e => { changeInput({longitude: e.detail.value})}} />
                            <Input type='digit' className='flex-1 m-l-20' placeholder='纬度' value={formData.latitude} onInput={e => { changeInput({latitude: e.detail.value})}} />
                            <View className='m-l-30' onClick={getLocation}>
                                <XImage src='origin.png' className='location-icon'></XImage>
                            </View>
                        </View>
                    </XFormItem>
                </View>
            </View>
            <View className='m-t-60 p-l-r'>
                <AtButton type='primary' circle onClick={submit}>保 存</AtButton>
            </View>

        </View>

    </>
}